<!DOCTYPE html>
<html lang="en">
<!-- 拖拽元素移动位置改变 -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽元素移动位置改变</title>
    <style>
        .commonSize {
            position: relative;
        }
    </style>
</head>

<body>
    <img class="commonSize" src="../assets/images/111.png" alt="" draggable="true">
</body>

<script>
    // 拖动图片并且移动到相应位置
    window.onload = function () {
        var imgDom = document.getElementsByClassName('commonSize')[0]
        console.log(imgDom, "imgDom");
        var offsetX, offsetY;

        // 元素每次拖动开始时，记录它的坐标（偏移量）
        imgDom.ondragstart = function (e) {
            offsetX = e.offsetX
            offsetY = e.offsetY
        }

        // 元素拖动过程中，重新设置它的坐标（偏移量）
        imgDom.ondrag = function (e) {
            // style.left是relative相对位置
            imgDom.style.left = (e.pageX - offsetX) + 'px'
            imgDom.style.top = (e.pageY - offsetY) + 'px'
        }

        // 元素每次拖动开始时，记录它的坐标（偏移量）
        imgDom.ondragend = function (e) {
            imgDom.style.left = (e.pageX - offsetX) + 'px'
            imgDom.style.top = (e.pageY - offsetY) + 'px'
        }
    }
</script>

</html>